<template>
  <div>

    <el-row>
      <el-col :span="8">
        <el-button type="primary" plain size="small" style="float: left; margin-left: 20px;" @click="add()">新增
        </el-button>
      </el-col>
    </el-row>

    <el-table :data="memberList" style="width: 100%">

      <el-table-column label="编号" width="180">
        <!-- 插槽，类似于迭代变量 -->
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.userId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="姓名">
        <template slot-scope="scope">
          <i class="el-icon-house"></i>
          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="账号">
        <template slot-scope="scope">
          <i class="el-icon-s-custom"></i>
          <span style="margin-left: 10px">{{ scope.row.userAccount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系电话">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.userIpone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="会员等级">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.userMember }}</span>
        </template>
      </el-table-column>

      <el-table-column label="会员积分">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.userIntegral }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.row)"><i class="el-icon-edit"></i></el-button>
          <el-button size="mini" type="danger" @click="delInfo(scope.row)"><i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>

    </el-table>

    <div class="block">
      <!--page-size: 默认显示条数 -->
      <el-pagination @size-change="selectPage" @current-change="handleCurrentChange" :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 模态框，新增用 -->
    <el-dialog :title="title" :visible.sync="isShowAdd" width="40%">

      <el-form ref="form" label-width="80px">
        <br />
        <el-form-item label="姓名">
          <el-col :span="22">
            <input type="hidden" v-model="addMemberForm.userId" />
            <el-input placeholder="请修改会员姓名" v-model="addMemberForm.userName"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="性别">
          <el-col :span="22">
            <el-input placeholder="请输入性别" v-model="addMemberForm.userSex"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="年龄">
          <el-col :span="22">
            <el-input placeholder="请输入年龄" v-model="addMemberForm.userAge"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="地址">
          <el-col :span="22">
            <el-input placeholder="请输入地址" v-model="addMemberForm.userAddress"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="账号">
          <el-col :span="22">
            <el-input placeholder="请输入账号" v-model="addMemberForm.userAccount"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="密码">
          <el-col :span="22">
            <el-input v-model="addMemberForm.userPassword"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="邮箱">
          <el-col :span="22">
            <el-input placeholder="请输入邮箱" v-model="addMemberForm.userEmail"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="手机号">
          <el-col :span="22">
            <el-input placeholder="请输入手机号" v-model="addMemberForm.userIpone"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="会员等级">
          <el-col :span="22">
            <el-radio-group v-model="addMemberForm.userMember">
                <el-radio :label="1">普通会员</el-radio>
                <el-radio :label="2">黄金会员</el-radio>
                <el-radio :label="3">砖石会员</el-radio>
              </el-radio-group>
          </el-col>
        </el-form-item>

        <el-form-item label="会员积分">
          <el-col :span="22">
            <el-input placeholder="请输入会员积分" v-model="addMemberForm.userIntegral"></el-input>
          </el-col>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAdd = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo()">保存</el-button>
      </span>
    </el-dialog>

    <!-- 模态框，修改用 -->
    <el-dialog :title="title" :visible.sync="isShowUpdate" width="40%">

      <el-form ref="form" label-width="80px">
        <br />
        <el-form-item label="姓名">
          <el-col :span="22">
            <input type="hidden" v-model="updateMemberForm.userId" />
            <el-input placeholder="请修改会员姓名" v-model="updateMemberForm.userName"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="性别">
          <el-col :span="22">
            <el-input placeholder="请输入性别" v-model="updateMemberForm.userSex"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="年龄">
          <el-col :span="22">
            <el-input placeholder="请输入年龄" v-model="updateMemberForm.userAge"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="地址">
          <el-col :span="22">
            <el-input placeholder="请输入地址" v-model="updateMemberForm.userAddress"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="账号">
          <el-col :span="22">
            <el-input placeholder="请输入账号" v-model="updateMemberForm.userAccount"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="密码">
          <el-col :span="22">
            <el-input v-model="updateMemberForm.userPassword"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="邮箱">
          <el-col :span="22">
            <el-input placeholder="请输入邮箱" v-model="updateMemberForm.userEmail"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="手机号">
          <el-col :span="22">
            <el-input placeholder="请输入手机号" v-model="updateMemberForm.userIpone"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="会员等级">
          <el-col :span="22">
            <el-radio-group v-model="updateMemberForm.userMember">
                <el-radio :label="1">普通会员</el-radio>
                <el-radio :label="2">黄金会员</el-radio>
                <el-radio :label="3">砖石会员</el-radio>
              </el-radio-group>
          </el-col>
        </el-form-item>

        <el-form-item label="会员积分">
          <el-col :span="22">
            <el-input placeholder="请输入会员积分" v-model="updateMemberForm.userIntegral"></el-input>
          </el-col>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowUpdate = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo()">保存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "memberList",
    data() {
      return {
        memberList: [],

        total: 0, //总条数
        totalPage: 0, //总页数
        curPage: 1, //当前数
        rows: 5, //每页显示条数

        isShowAdd: false, //模态框是否显示
        isShowUpdate:false,
        title: "新增", //模态框标题

        addMemberForm: { //表单的请求对象
          userId: null,
          userName: "",
          userSex: "",
          userAge: "",
          userAddress: "",
          userAccount: "",
          userPassword: "",
          userEmail: "",
          userIpone: "",
          userMember: "",
          userIntegral: "",
        },

        updateMemberForm: { //表单的请求对象
          userId: null,
          userName: "",
          userSex: "",
          userAge: "",
          userAddress: "",
          userAccount: "",
          userPassword: "",
          userEmail: "",
          userIpone: "",
          userMember: "",
          userIntegral: "",
        },


      }
    },

    methods: {
      loaddata() { //加载数据
        var mythis = this;

        $.ajax({
          url: "http://127.0.0.1:8080/hotel/members",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows,
            "supPartner": mythis.supPartner,
          },
          dataType: "json",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: function(data) {
            /* info是后端map的建名 */
            mythis.memberList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage;

          }
        })
      },

      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },

      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },

      handleCurrentChange(val) { //当前用户页
        this.curPage = val;
        this.loaddata();
      },


      add() { //打开新增模态框
        /* 显示模态框 */
        this.isShowAdd = true;
        /* 更改模态框的标题 */
        this.title = "新增";
        /* 清除表单元素 */
        this.addMemberForm.userId = 0;
        this.addMemberForm.userName = "";
        this.addMemberForm.userSex = "";
        this.addMemberForm.userAge = null;
        this.addMemberForm.userAddress = "";
        this.addMemberForm.userAccount = "";
        this.addMemberForm.userPassword = "";
        this.addMemberForm.userEmail = "";
        this.addMemberForm.userIpone = "";
        this.addMemberForm.userMember = "";
        this.addMemberForm.userIntegral = null;
      },

      update(member) { //打开修改模态框
        /* 显示模态框 */
        this.isShowUpdate = true;
        /* 更改模态框的标题 */
        this.title = "修改";
        /* 把选中的值赋值给模态框的表单元素 */

        this.updateMemberForm.userId = member.userId;
        this.updateMemberForm.userName = member.userName;
        this.updateMemberForm.userSex = member.userSex;
        this.updateMemberForm.userAge = member.userAge;
        this.updateMemberForm.userAddress = member.userAddress;
        this.updateMemberForm.userAccount = member.userAccount;
        this.updateMemberForm.userPassword = member.userPassword;
        this.updateMemberForm.userEmail = member.userEmail;
        this.updateMemberForm.userIpone = member.userIpone;
        if(member.userMember == "普通会员"){
          this.updateMemberForm.userMember = 1;
        }else if(member.userMember == "黄金会员"){
          this.updateMemberForm.userMember = 2;
        }else if(member.userMember == "砖石会员"){
          this.updateMemberForm.userMember = 3;
        }

        this.updateMemberForm.userIntegral = member.userIntegral;
      },

      delInfo(member) { //删除
        var is = confirm("你确定要删除数据吗?");
        if (is) {
          var mythis = this;
          $.ajax({
            url: "http://localhost:8080/account/delUser",
            type: "get",
            data: {
              "id": member.userId,
            },
            dataType: "json",
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function(data) {
              mythis.$alert(data.info)
              if (data.code == "ok") {
                //刷新
                mythis.loaddata();
              }
            }
          })
        }
      },

      saveInfo() { //保存

        var url = "";
        var memberF ="";
        if (this.title == "新增") {
          url = "http://localhost:8080/account/addUser";
          memberF = this.addMemberForm;
        } else {
          url = "http://localhost:8080/account/updateUser";
          memberF = this.updateMemberForm;
        }

        var mythis = this;
        $.ajax({
          url: url,
          type: "get",
          data: memberF,
          dataType: "json",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: function(data) {
            mythis.$message(data.info)
            if (data.code == "ok") {
              //关闭模态框
              mythis.isShowAdd = false;
              mythis.isShowUpdate = false;
              //刷新
              mythis.loaddata();
            }
          }
        })

      },


    },

    mounted() { //挂载函数
      this.loaddata();
    }
  }
</script>

<style>
</style>
